<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>新闻管理列表 - 春天集团</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, news-scalable=0">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/asserts/css/ksd.css" media="all">
	<link rel="stylesheet" href="/plugins/layui/css/modules/laydate/default/laydate.css?v=5.3.1" media="all">
	<link rel="stylesheet" href="/plugins/layui/css/modules/layer/default/layer.css?v=3.5.1" media="all">
	<link rel="stylesheet" href="/plugins/layui/css/modules/code.css?v=2" media="all">
	<style>
		.ksdinput{width:180px;height: 28px;border:1px solid #eee;outline: none;font-size: 14px;padding:4px;text-indent: 0.5em;}
	</style>
</head>
<body>
<div id="app">
	<div class="layui-card layadmin-header">
		<div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
			<a lay-href="">主页</a><span lay-separator="">/</span>
			<a><cite>组件</cite></a><span lay-separator="">/</span>
			<a><cite>数据表格</cite></a><span lay-separator="">/</span>
			<a><cite>{{title}}</cite></a>
		</div>
	</div>
	<div class="layui-fluid" >
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
						<div class="layui-form layui-border-box layui-table-view layui-table-view-1" lay-filter="LAY-TABLE-FORM-DF-1" lay-id="test-table-toolbar" style=" ">
							<div class="layui-table-tool">
								<div class="layui-table-tool-temp">
                                    <input type="text" class="ksdinput" v-model="newsVo.keyword" maxlength="20" placeholder="请输入关键词">
                                    <button class="layui-btn layui-btn-sm" @click="search" lay-event="isAll"><svg t="1631629928153" class="icon fl pr ftp2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3522" width="32" height="32"><path d="M522.24 522.24m-153.6 0a153.6 153.6 0 1 0 307.2 0 153.6 153.6 0 1 0-307.2 0Z" fill="#FFCE00" p-id="3523"></path><path d="M776.192 771.072a30.72 30.72 0 0 1-43.44832 0L667.648 705.93536a30.72 30.72 0 0 1 43.40736-43.40736l65.13664 65.13664a30.72 30.72 0 0 1 0 43.40736zM481.28 727.04a245.76 245.76 0 1 1 245.76-245.76 245.76 245.76 0 0 1-245.76 245.76z m0-430.08a184.32 184.32 0 1 0 184.32 184.32 184.32 184.32 0 0 0-184.32-184.32z" fill="#333333" p-id="3524"></path></svg><span>搜索</span></button>
                                    <a href="/admin/news/add"><button class="layui-btn layui-btn-sm" lay-event="isAll"><svg t="1631689510712" class="icon fl pr tp5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7464" width="16" height="16"><path d="M469.333333 469.333333V213.333333h85.333334v256h256v85.333334h-256v256h-85.333334v-256H213.333333v-85.333334z" p-id="7465" fill="#ffffff"></path></svg><span>添加</span></button></a>
                                </div>
							</div>
							<div class="layui-table-box">
								<div class="layui-table-body layui-table-main">
									<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
										<thead>
										<tr>
                                            <th data-field="newsname">
                                                <div class="layui-table-cell laytable-cell-1-0-2"><span>ID</span></div>
                                            </th>
                                            <th data-field="newsname">
                                                <div class="layui-table-cell laytable-cell-1-0-2"><span>新闻标题</span></div>
                                            </th>
                                            <th data-field="newsname">
                                                <div class="layui-table-cell laytable-cell-1-0-2"><span>作者</span></div>
                                            </th>
                                            <th data-field="newsname">
                                                <div class="layui-table-cell laytable-cell-1-0-2"><span>分类名称</span></div>
                                            </th>
                                            <th data-field="newsname">
                                                <div class="layui-table-cell laytable-cell-1-0-2"><span>封面缩略图地址</span></div>
                                            </th>
                                                 <th data-field="newsname">
                                                    <div class="layui-table-cell laytable-cell-1-0-2"><span>发布状态</span></div>
                                                </th>
                                            <th data-field="newsname">
                                                <div class="layui-table-cell laytable-cell-1-0-2"><span>创建时间</span></div>
                                            </th>
											<th class=" layui-table-col-special">
												<div class="layui-table-cell laytable-cell-1-0-11"><span>操作</span></div>
											</th>
										</tr>
										</thead>
										<tbody>
											<tr data-index="0" class="" :title="'ID:'+news.id" v-for="(news,index) in newsList">

                                                <td>
                                                    <div class="layui-table-cell laytable-cell-1-0-1">{{news.id}}</div>
                                                </td>


                                                <td>
                                                    <div class="layui-table-cell laytable-cell-1-0-1">{{news.title}}</div>
                                                </td>

                                                <td>
                                                    <div class="layui-table-cell laytable-cell-1-0-1">{{news.author}}</div>
                                                </td>


                                                <td>
                                                    <div class="layui-table-cell laytable-cell-1-0-1">{{news.categoryname}}</div>
                                                </td>

                                                <td>
                                                    <div class="layui-table-cell laytable-cell-1-0-1">
                                                        <img :src="news.cover" class="ksd-listtab-img">
                                                    </div>
                                                </td>
												<td @click="sendStatus(index)">
                                                    <div class="layui-table-cell laytable-cell-1-0-1 green" v-if="news.status==1">发布</div>
                                                    <div class="layui-table-cell laytable-cell-1-0-1 red" v-if="news.status==0">未发布</div>
                                                </td>


                                                <td>
                                                    <div class="layui-table-cell laytable-cell-1-0-1">{{news.createTime}}</div>
                                                </td>

												<td
                                                    class="layui-table-col-special">
                                                    <div class="layui-table-cell laytable-cell-1-0-11">
                                                        <a class="layui-btn layui-btn-xs" lay-event="edit" :href="'/admin/news/add?id='+news.id">编辑</a>
                                                        <a class="layui-btn layui-btn-danger layui-btn-xs" @click="del(index)" lay-event="del">删除</a>
                                                    </div>
                                                </td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<Page :total="total" :current-page='newsVo.pageNo' :display="newsVo.pageSize" @pagechange="pagechange"></Page>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/plugins/layui/layui.js"></script>
    <script src="/asserts/js/vue.min.js"></script>
    <script src="/asserts/js/axios.min.js"></script>
    <script src="/asserts/js/vue.page.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                title: "新闻管理列表",
                newsList: [],
                newsVo: {pageNo: 1, pageSize: 10, keyword: ""},
                total: 0
            },
            created: function () {
                var that = this;
                // 1: 加载新闻管理数据
                that.load(function(page){
                    that.total = page.total;
                });
            },
            methods: {
                // 分页回调
                pagechange:function(currentPage){
                    this.newsVo.pageNo = currentPage;
                    this.load();
                },

                // 搜索新闻管理
                search: function () {
                    var that = this;
                    // 1：清空当前新闻管理集合
                    that.newsList = [];
                    // 2: 因为新闻管理肯能以及翻页了很多了
                    that.newsVo.pageNo = 1;
                    that.newsVo.pageSize = 10;
                    that.load(function(page){
                        that.total = page.total;
                    });
                },

                // 状态的更改
                sendStatus :function(index){
                    var that = this;
                    var opid = that.newsList[index].id;
                    that.newsList[index].status = that.newsList[index].status == 1?0:1;
                    layer.load("执行中...");
                    axios.post("/admin/news/saveupdate",that.newsList[index]).then(function(res){
                        layer.closeAll();
                        if(res.data.code == 200){
                            layer.msg("修改成功!!!");
                        }
                    })
                },

                // 查询新闻管理分页
                load: function (callback) {
                    var that = this;
                    var lindex = layer.load(2);
                    axios.post("/admin/news/load", that.newsVo).then(function (res) {
                        layer.close(lindex);
                        if (res.data.code == 200) {
                            that.newsList = res.data.data.records;
                            callback && callback(res.data.data);
                        }
                    });
                },

                // 删除新闻管理
                del:function(index){
                    var that = this;
                    var opid = that.newsList[index].id;
                    var dindex = layer.confirm('你确定进行删除操作吗?', {title: '提示', btn: ['确定删除?', '放弃操作']}, function () {
                        axios.post("/admin/news/delete/"+opid).then(function(res){
                            if(res.data.code == 200){
                                layer.close(dindex);
                                layer.msg("删除成功!!!");
                                that.newsList.splice(index,1);
                            }
                        })
                    });
                }
            }
        })
    </script>
</div>
</body>
</html>